<template id='InviteAssist'>
  <div class="inviteAssist">
    <div class="pc">
      <div class="pcTop">
        <img :src="defaultIcon" class="defaultIcon" />
        <p class="defaultName">METAUP</p>
        <p class="pcTopDesc">“助我一臂之力购买数字藏品吧”</p>
      </div>
      <div class="pcCenter">
        <img :src="defaultIcon" class="productImage" />
        <div class="pcProductInfo">
          <p class="pcProductName">METAUP MEMBER</p>
          <p class="pcProductPrice"><span>¥</span>9888</p>
        </div>
      </div>
      <div class="pcBottom">
        <img :src="inviteAssistBottomBg" class="inviteAssistBottomBg" />
        <img :src="inviteAssistHelp" class="inviteAssistHelp" />
        <img :src="inviteAssistFinish" class="inviteAssistFinish" v-if="helpPercent == 5" />
        <p class="pcBottomTitle" v-if="helpPercent !== 5">
          还差 <span>{{ total - helpPercent }}</span> 人助力成功
        </p>
        <p class="pcBottomTitle" v-else>好友助力完成</p>
        <div class="pcBottomHelp">
          <div class="pcHelpProcess" :class="{ finishMargin: helpPercent == 5 }">
            <div class="pcHelpCurrent" :style="{ width: getHelpWidth(helpPercent) }"></div>
          </div>
          <p>
            <span>{{ helpPercent }}</span>/5<span v-if="helpPercent == 5"> (好友助力完成)</span>
          </p>
        </div>
        <div class="pcBottomBtn" v-if="helpPercent !== 5">立即帮他助力</div>
        <div class="pcBottomSuccessBtn" v-else>助力成功</div>
      </div>
    </div>
    <div class="phone">
      <div class="phoneHead">
        <img :src="phoneLogo" class="phoneLogo" />
        <div class="phoneHeadInfo">
          <p class="phoneHeadInfoTitle">METAUP</p>
          <p class="phoneHeadInfoName">去METAUP发现你喜欢的数字藏品</p>
        </div>
        <div class="phoneHeadApp">打开App</div>
      </div>
      <div class="phoneContent">
        <img :src="defaultIcon" class="phoneDefaultIcon" />
        <p class="phoneDefaultName">METAUP</p>
        <div class="phoneDefaultDesc">
          <span>"助我一臂之力购买数字藏品吧"</span>
        </div>
        <div class="phoneProductContent">
          <img :src="defaultIcon" class="phoneProductImage" />
          <div class="phoneProductInfo">
            <p class="phoneProductName">METAUP MEMBER</p>
            <p class="phoneProductPrice"><span>¥</span>9888</p>
          </div>
        </div>
        <div class="phoneBottm">
          <img :src="phoneAssistTitle" class="phoneAssistTitle" />
          <img :src="phoneAssistFinish" class="phoneAssistFinish" v-if="helpPercent == 5" />
          <p class="phoneBottomTitle" v-if="helpPercent !== 5">
            还差 <span>{{ total - helpPercent }}</span> 人助力成功
          </p>
          <p class="phoneBottomTitle" v-else>好友助力完成</p>
          <div class="phoneBottomHelp">
            <div class="phoneHelpProcess" :class="{ finishMargin: helpPercent == 5 }">
              <div class="phoneHelpCurrent" :style="{ width: getHelpWidth(helpPercent) }"></div>
            </div>
            <p>
              <span>{{ helpPercent }}</span>/5<span v-if="helpPercent == 5"> (完成)</span>
            </p>
          </div>
          <div class="phoneBottomBtn" v-if="helpPercent !== 5">
            立即帮他助力
          </div>
          <div class="phoneBottomSuccessBtn" v-else>助力成功</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "inviteAssist",
  components: {},
  // 定义属性
  data() {
    return {
      phoneLogo: require("@/assets/images/invite/phoneAssistLogo.png"),
      defaultIcon: require("@/assets/images/invite/defaultIcon.png"),
      inviteAssistBottomBg: require("@/assets/images/invite/inviteAssistBottom.png"),
      inviteAssistHelp: require("@/assets/images/invite/inviteTitle.png"),
      phoneAssistTitle: require("@/assets/images/invite/phoneAssistTitle.png"),
      phoneAssistFinish: require("@/assets/images/invite/phoneAssistFinish.png"),
      inviteAssistFinish: require("@/assets/images/invite/inviteAssistFinish.png"),
      helpPercent: 0,
      total: 5,
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getHelpWidth(helpPercent) {
      let percent = (helpPercent / this.total) * 100;
      return `${percent}%`;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.inviteAssist {
  margin-top: 11px;
  margin-bottom: 168px;

  p {
    margin: 0;
  }

  .pc {
    width: 900px;
    margin: 0 auto;

    .pcTop {
      background: url("~@/assets/images/invite/inviteAssistTop.png");
      background-size: 100% 100%;
      height: 240px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .defaultIcon {
        margin-top: 23px;
        width: 80px;
        height: 80px;
        border-radius: 40px;
      }

      .defaultName {
        margin-top: 15px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .pcTopDesc {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
      }
    }

    .pcCenter {
      height: 100px;
      background: #2b2c2d;
      backdrop-filter: blur(3px);
      padding: 20px;
      display: flex;

      .productImage {
        width: 60px;
        height: 60px;
        margin-right: 20px;
      }

      .pcProductInfo {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .pcProductName {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }

        .pcProductPrice {
          font-size: 16px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #00ffb0;

          span {
            font-size: 12px;
            margin-right: 3px;
          }
        }
      }
    }

    .pcBottom {
      user-select: none;
      margin-top: 20px;
      height: 329px;
      background: #2b2c2d;
      backdrop-filter: blur(3px);
      position: relative;
      padding: 30px 30px 40px 30px;

      .inviteAssistBottomBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 502px;
        height: 202px;
      }

      .inviteAssistHelp {
        width: 150px;
        height: 30px;
      }

      .inviteAssistFinish {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 90px;
      }

      .pcBottomTitle {
        margin-top: 39px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        text-align: center;

        span {
          color: #00ffb0;
        }
      }

      .pcBottomHelp {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 31px;

        .pcHelpProcess {
          width: 500px;
          height: 8px;
          background: #1e2020;
          border-radius: 4px;
          margin-right: 38px;

          .pcHelpCurrent {
            height: 8px;
            background: #00ffb0;
            border-radius: 4px;
          }
        }

        .finishMargin {
          margin-right: 20px;
        }

        p {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;

          span {
            color: #00ffb0;
          }
        }
      }

      .pcBottomBtn,
      .pcBottomSuccessBtn {
        margin: 0 auto;
        margin-top: 70px;
        cursor: pointer;
        background: url("~@/assets/images/invite/inviteCodeBtn.png");
        background-size: 100% 100%;
        width: 345px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
      }

      .pcBottomSuccessBtn {
        cursor: unset;
        background: url("~@/assets/images/invite/inviteSuccessBtn.png");
        background-size: 100% 100%;
      }
    }
  }

  .phone {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .inviteAssist {
    margin: 0;

    .pc {
      display: none;
    }

    .phone {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #1e2020;

      .phoneHead {
        width: 100%;
        height: 108px;
        background: #2b2c2d;
        padding: 19px 32px;
        display: flex;
        align-items: center;

        .phoneLogo {
          width: 70px;
          height: 70px;
          margin-right: 20px;
        }

        .phoneHeadInfo {
          .phoneHeadInfoTitle {
            font-size: 28px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }

          .phoneHeadInfoName {
            font-size: 22px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #aaaaaa;
          }
        }

        .phoneHeadApp {
          width: 144px;
          height: 54px;
          background: #11f7ad;
          border-radius: 27px;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: auto;
        }
      }

      .phoneContent {
        padding: 0 30px;
        margin-top: 60px;
        padding-bottom: 558px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .phoneDefaultIcon {
          width: 88px;
          height: 88px;
        }

        .phoneDefaultName {
          margin-top: 20px;
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        .phoneDefaultDesc {
          margin-top: 20px;
          background: url("~@/assets/images/invite/phoneAssistSloganBg.png");
          background-size: 100% 100%;
          width: 100%;
          height: 92px;
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          display: flex;
          justify-content: center;

          span {
            padding-top: 40px;
          }
        }

        .phoneProductContent {
          width: 100%;
          height: 136px;
          background: #2b2c2d;
          backdrop-filter: blur(3px);
          padding: 30px;
          display: flex;
          align-items: center;

          .phoneProductImage {
            width: 76px;
            height: 76px;
            margin-right: 20px;
          }

          .phoneProductInfo {
            height: 76px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .phoneProductName {
              font-size: 28px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
            }

            .phoneProductPrice {
              font-size: 32px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #00ffb0;

              span {
                font-size: 24px;
                margin-right: 5px;
              }
            }
          }
        }

        .phoneBottm {
          margin-top: 30px;
          background: url("~@/assets/images/invite/phoneAssistBg.png") no-repeat;
          background-size: 100% 100%;
          width: 100%;
          height: 380px;
          padding: 30px 0 0 30px;
          position: relative;

          .phoneAssistTitle {
            width: 180px;
            height: 36px;
          }

          .phoneAssistFinish {
            position: absolute;
            top: 0;
            right: 0;
            width: 132px;
            height: 108px;
          }

          .phoneBottomTitle {
            margin-top: 34px;
            font-size: 28px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            text-align: center;

            span {
              color: #00ffb0;
            }
          }

          .phoneBottomHelp {
            display: flex;
            align-items: center;
            margin-top: 44px;

            .phoneHelpProcess {
              width: 490px;
              height: 16px;
              background: #1e2020;
              border-radius: 8px;
              margin-right: 66px;

              .phoneHelpCurrent {
                height: 16px;
                background: #00ffb0;
                border-radius: 8px;
              }
            }

            .finishMargin {
              margin-right: 30px;
            }

            p {
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #fff;

              span {
                color: #00ffb0;
              }
            }
          }

          .phoneBottomBtn,
          .phoneBottomSuccessBtn {
            margin: 0 auto;
            margin-top: 60px;
            background: url("~@/assets/images/invite/phoneAssistBtn.png");
            background-size: 100% 100%;
            width: 430px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #1e2020;
          }

          .phoneBottomSuccessBtn {
            background: url("~@/assets/images/invite/phoneAssistSuccessBtn.png");
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>